<template>
	<view>
		<!-- 自定义导航栏 -->
		<z-nav-bar transparentFixedFontColor="#000" :scrollTop="scrollTop" type="transparentFixed" title="红娘旗下"></z-nav-bar>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="h-bg" :style="'background-image: url('+headBgImg+');'">
			<view class="head flex column align-item">
				<view class="head-avatar flex align-item">
					<view class="neiyuan">
						<image :src="matchmakerInfo.logo" mode=""></image>
					</view>
				</view>
				<view class="head-gongsi" v-if="matchmakerInfo.is_personal == 1">
					{{ matchmakerInfo.name || '' }}
				</view>
				<view class="head-gongsi" v-else>
					{{ matchmakerInfo.organization_name || '' }}
				</view>
				<view class="hear-shuju">
					旗下人员{{ qixiaNum }}人
				</view>
			</view>
			<view class="box-item">
				<u-search placeholder="搜索" v-model="keyword" :show-action="false" bgColor="#FFFFFF" placeholderColor="#BDC5D4" @search="search()"></u-search>
			</view>
		</view>
		<view class="main">
			<view class="flex j-between align-item bt">
				<view class="bt-left">
					<image class="bt-left-img" :src="imgUrl + '/static/web/img/yuanfen.png'" mode=""></image>
					<view class="bt-left-txt">
						心动就在一瞬间～
					</view>
				</view>
				<view class="bt-right flex align-item" @click="goSearch">
					<view>
						筛选 
					</view>
					<view style="margin: 0 10rpx;">
						{{ searchLength ? '.' + searchLength : '' }}
					</view>
					<image class="bt-right-icon" :src="imgUrl + '/static/web/img/jiantou.png'" mode=""></image>
				</view>
			</view>
			
			<!-- 瀑布流 -->
			<view class="waterfall-box h-flex-x h-flex-2">
				<view>
					<helang-waterfall 
						v-for="(item,index) in leftList" 
						:key="index" 
						:params="item" 
						tag="left"
						:index="index"
						@height="onHeight"
						@click="onClick"
						@collection="collection"
					></helang-waterfall>
				</view>
				<view>
					<helang-waterfall 
						v-for="(item,index) in rightList" 
						:key="index" 
						:params="item" 
						@height="onHeight"
						@click="onClick"
						tag="right"
						:index="index"
						@collection="collection"
					></helang-waterfall>
				</view>
			</view>
			<view class="load-txt">{{ajax.loadTxt}}</view>
			<!-- <view class="fu-btn" v-if="lastPages == 'my' " @click="goPage">
				<image :src="imgUrl + 'static/web/icon/fabu.png'" mode=""></image>
			</view> -->
		</view>
	</view>
</template>

<script>
import helangWaterfall from "@/uni_modules/helang-waterfall/components/helang-waterfall/helang-waterfall.vue"
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			imgUrl: this.$http.baseUrl, // 服务器域名
			headBgImg: this.$http.baseUrl + 'static/web/img/apply-bg.png', //顶部背景图片 
			uid: '', // 存储用户id
			// userInfo: {}, // 存储用户信息
			// 图片瀑布流
			leftHeight: 0,
			rightHeight: 0,
			leftList: [],
			rightList: [],
			ajax: {
				// 是否可以加载
				load: true,
				// 加载中提示文字
				loadTxt: '',
				// 每页的请求条件
				limit:20,
				// 页码
				page:1,
			},
			user_id: '', // 红娘用户id
			matchmakerInfo: [], // 存储红娘信息
			searchData: {}, // 搜索条件--搜索页
			searchLength: 0, // 搜索条件长度--搜索页
			keyword: '', // 搜索条件--顶部搜索框
			qixiaNum: 0, // 红娘旗下人数
			lastPages: '', // 判断是个页面是否是个人中心页面
			scrollTop: 0, // 顶部导航栏类型
		};
	},
	computed: {
		...mapState(['userInfo']),
	},
	onLoad(e) {
		var that = this,userInfo = this.$store.state.userInfo
		that.uid = userInfo.uid;
		that.userInfo = userInfo
		that.user_id = e.user_id ?  e.user_id : userInfo.uid
		that.prePage()
		that.getMatchMakerDetails()
		that.getList();
		uni.$on('updateData', function(data) {
			that.searchData = data
			that.searchLength = Object.keys(data).length;
			that.leftHeight = 0
			that.rightHeight = 0
			that.ajax.page = 1;
			that.leftList = []
			that.rightList = []
			that.getList();
		})
	},
	//页面显示
	onShow() {
		
	},
	components: {
		"helang-waterfall": helangWaterfall
	},
	// 监听滑动事件
	onPageScroll(e) {
		this.scrollTop = e.scrollTop
	},
	onReady() {
	},
	// 触底触发
	onReachBottom() {
		this.getList();
	},
	// 下拉刷新
	onPullDownRefresh(){
		// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
		setTimeout(()=>{
			this.ajax.page = 1;
			this.leftHeight = 0;
			this.rightHeight = 0;
			this.ajax.load = true;
			this.getList();
		},800);
	},
	//方法
	methods: {
		// 获取上个页面地址
		prePage() {
			
			var pages = getCurrentPages();
			var page = pages[pages.length - 2];
			if(page.$page.fullPath == '/pages/my/my'){
				this.lastPages = 'my'
			}
		},
		// 点击搜索
		search(){
			var that = this;
			that.ajax.page = 1;
			that.leftHeight = 0
			that.rightHeight = 0
			that.leftList = []
			that.rightList = []
			that.getList()
		},
		// 图片瀑布流
		// 监听高度变化
		onHeight(height, tag) {
			if (tag == 'left') {
				this.leftHeight += height;
			} else {
				this.rightHeight += height;
			}
		},
		// 红娘前往发布页面
		goPage(){
			uni.navigateTo({
				url: '/pages/release/basic_information/basic_information?user_type=2'
			})
		},
		// 组件点击事件
		onClick(index,a,b){
			uni.navigateTo({
				url: '/pages/home/matchmaker_user_detail/matchmaker_user_detail?authentication_id=' + index.authentication_id + '&a=' + a + '&b=' + b
			})
		},
		// 获取数据
		// 获取数据
		getList() {
			var that = this
			that.$http.get('api/ZhAuthentication/index',{...that.searchData,...that.ajax,'real_name':that.keyword,'matchmaker_id': that.user_id}).then(res => {
					if(res){
						that.addList(res.data)
					}
				});
		},
		addList(res) {
			// 获取到的数据，请注意数据结构
			console.log(res);
			
			if(!res || res.length < 1){
				this.ajax.loadTxt = '没有更多了';
				return;
			}

			// 左右列表高度的差
			let differ = this.leftHeight - this.rightHeight;
			// 计算差值，用于确定优先插入那一边
			let differVal = 0;
							
			// 初始化左右列表的数据
			let i = differ > 0 ? 1 : 0;
			
			let [left, right] = [
				[],
				[]
			];
			
			
			// 获取插入的方向
			let getDirection = (index)=>{
				/* 左侧高度大于右侧超过 600px 时，则前3条数据都插入到右边 */
				if(differ>= 600 && index < 3){
					differVal = 1;
					return 'right';
				}
				
				/* 右侧高度大于左侧超过 600px 时，则前3条数据都插入到左边 */
				if(differ <= -600 && index < 3){
					differVal = -1;
					return 'left';
				}
				
				/* 左侧高度大于右侧超过 350px 时，则前2条数据都插入到右边 */
				if(differ >= 350 && index < 2){
					return 'right';
				}
				/* 右侧高度大于左侧超过 350px 时，则前2条数据都插入到左边 */
				if(differ <= -350 && index < 2){
					differVal = -1;
					return 'left';
				}
				
				/* 当前数据序号为偶数时，则插入到左边 */
				if ((i+differVal) % 2 == 0) {
					return 'left';
				} else {
					/* 当前数据序号为奇数时，则插入到右边 */
					return 'right';
				}
			}
			
			// 将数据源分为左右两个列表，容错差值请自行根据项目中的数据情况调节
			res.forEach((item, index) => {
				if(getDirection(index) == 'left'){
					//console.log(`差值：${differ},方向：left，序号${index}`)
					left.push(item);
				}else{
					//console.log(`差值：${differ},方向：right，序号${index}`)
					right.push(item);
				}
				i++;
			});
			
			// 将左右列表的数据插入，第一页时则覆盖
			if(this.ajax.page == 1){
				this.leftList = left;
				this.rightList = right;
				uni.stopPullDownRefresh();
			}else{
				this.leftList = [...this.leftList, ...left];
				this.rightList = [...this.rightList, ...right];
			}

			this.ajax.load = true;
			this.ajax.loadTxt = '上拉加载更多';
			this.ajax.page++;
		},
		// 获取红娘信息详情 
		getMatchMakerDetails(){
			var that = this
			that.$http.get('api/ZhMatchmaker/detail',{
				'user_id': that.user_id
			}).then(res=>{
				if(res){
					that.matchmakerInfo = res.matchmaker_info
					that.qixiaNum = res.qixiaNum
				}
			})
		},
		// 刷新
		shuaxincopy(a,b){
			var that = this
			if(a == 'right'){
				if(that.rightList[b].is_collection == 1){
					that.rightList[b].is_collection = 0
				}else{
					that.rightList[b].is_collection = 1
				}
			}else if(a == 'left'){
				if(that.leftList[b].is_collection == 1){
					that.leftList[b].is_collection = 0
				}else{
					that.leftList[b].is_collection = 1
				}
			}
		},
		// 点击收藏/取消收藏
		collection(i,a,b){
			var that = this
			if(!that.uid){
				uni.showToast({
				    title: '请前往授权登录',
					icon: 'none',
				    duration: 1000
				});
				setTimeout(function() {
					uni.switchTab({
						url: '/pages/my/my'
					});
				}, 1000);
			}else{
				that.$http.post('api/ZhCollection/clickCollection',{
					'marriage_seeking_id': i.authentication_id,
					'release_id': i.u_id
				}).then(res=> {
					uni.showToast({
						title: '成功',
						icon:'none'
					})
					if(a == 'right'){
						if(that.rightList[b].is_collection == 1){
							that.rightList[b].is_collection = 0
						}else{
							that.rightList[b].is_collection = 1
						}
					}else if(a == 'left'){
						if(that.leftList[b].is_collection == 1){
							that.leftList[b].is_collection = 0
						}else{
							that.leftList[b].is_collection = 1
						}
					}
					uni.$emit('refresh')
				})
			}
		},
		// 前往筛选页
		goSearch(){
			uni.navigateTo({
				url: '/pages/home/search/search'
			})
		}
		
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {
		uni.$emit('refresh')
	},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
.flex {
	display: flex;
}
.align-item {
	align-items: center;
}
.j-between {
	justify-content: space-between;
}
.column {
	flex-direction: column;
}
.h-bg {
	width: 100%;
	padding: 196rpx 0 64rpx;
	.head {
		.head-avatar {
			justify-content: center;
			width: 168rpx;
			height: 168rpx;
			border-radius: 84rpx;
			background-color: #fff;
			margin-bottom: 40rpx;
			.neiyuan {
				width: 148rpx;
				height: 148rpx;
				border-radius: 74rpx;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.head-gongsi {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #000013;
		}
		.hear-shuju {
			font-size: 28rpx;
			font-family: PingFangSC-Light, PingFang SC;
			font-weight: 300;
			color: #6A6A7E;
			margin-bottom: 40rpx;
		}
	}
	.box-item {
		margin: 0 30rpx 30rpx;
	}
}
.uni-searchbar__box.data-v-1854464d {
	border: none !important;
}
.main {
	padding: 24rpx 30rpx;
	background-color: #fff;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	margin-top: -40rpx;
	.fu-btn {
		position: fixed;
		bottom: 120rpx;
		right: 40rpx;
		width: 150rpx;
		height: 150rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.bt {
		.bt-left {
			.bt-left-img {
				width: 120rpx;
				height: 50rpx;
			}
			.bt-left-txt {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #6A6A7E;
				margin: 10rpx 0 0 20rpx;
			}
		}
		.bt-right {
			width: 164rpx;
			height: 56rpx;
			background: #F3EFFF;
			border-radius: 28rpx;
			font-size: 28rpx;
			font-family: PingFang;
			font-weight: 400;
			color: #7F5AFF;
			justify-content: center;
			.bt-right-icon {
				width: 8rpx;
				height: 12rpx;
			}
		}
	}
}

.waterfall-box {
	padding: 20rpx 10rpx;
	box-sizing: border-box;

	>view {
		padding: 0 10rpx;
	}
}

.h-flex-x {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;

	&.h-flex-2 {
		>view {
			width: 50%;
		}
	}
}

.load-txt{
	padding: 0 0 20rpx 0;
	text-align: center;
	color: #999;
	font-size: 24rpx;
}
</style>
